<template>
  <view class="pagination">
    <view class="pagination-info">共 {{ total }} 条</view>
    
    <view class="pagination-btns">
      <button 
        :disabled="currentPage === 1" 
        @click="changePage(1)"
        class="pagination-btn"
      >首页</button>
      
      <button 
        :disabled="currentPage === 1" 
        @click="changePage(currentPage - 1)"
        class="pagination-btn"
      >上一页</button>
      
      <view 
        v-for="page in displayedPages" 
        :key="page"
        :class="['pagination-page', { active: currentPage === page }]"
        @click="changePage(page)"
      >{{ page }}</view>
      
      <button 
        :disabled="currentPage === totalPage" 
        @click="changePage(currentPage + 1)"
        class="pagination-btn"
      >下一页</button>
      
      <button 
        :disabled="currentPage === totalPage" 
        @click="changePage(totalPage)"
        class="pagination-btn"
      >尾页</button>
    </view>
    
    <view class="page-size-selector">
      <text>每页显示：</text>
      <picker @change="changePageSize" :value="pageSizeIndex" :range="pageSizeOptions">
        <view>{{ pageSize }}条</view>
      </picker>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    currentPage: {
      type: Number,
      default: 1
    },
    total: {
      type: Number,
      default: 0
    },
    pageSize: {
      type: Number,
      default: 10
    },
    maxVisiblePages: {
      type: Number,
      default: 5
    }
  },
  data() {
    return {
      pageSizeOptions: [10, 20, 50, 100],
      pageSizeIndex: 0
    }
  },
  computed: {
    totalPage() {
      return Math.ceil(this.total /      return Math.ceil(this.total / this.pageSize) || 1
    },
    displayedPages() {
      const pages = []
      const half = Math.floor(this.maxVisiblePages / 2)
      let start = Math.max(this.currentPage - half, 1)
      let end = Math.min(start + this.maxVisiblePages - 1, this.totalPage)
      
      if (end - start + 1 < this.maxVisiblePages) {
        start = Math.max(end - this.maxVisiblePages + 1, 1)
      }
      
      for (let i = start; i <= end; i++) {
        pages.push(i)
      }
      
      return pages
    }
  },
  methods: {
    changePage(page) {
      if (page >= 1 && page <= this.totalPage) {
        this.$emit('page-change', page)
      }
    },
    changePageSize(e) {
      const index = e.detail.value
      this.pageSizeIndex = index
      const newSize = this.pageSizeOptions[index]
      this.$emit('size-change', newSize)
    }
  }
}
</script>

<style scoped>
.pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20rpx 0;
  font-size: 28rpx;
}

.pagination-info {
  margin-bottom: 20rpx;
  color: #666;
}

.pagination-btns {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.pagination-btn, .pagination-page {
  margin: 0 10rpx;
  padding: 10rpx 20rpx;
  border: 1rpx solid #ddd;
  border-radius: 6rpx;
  background-color: #fff;
}

.pagination-btn:disabled {
  opacity: 0.5;
}

.pagination-page {
  cursor: pointer;
}

.pagination-page.active {
  background-color: #007AFF;
  color: #fff;
  border-color: #007AFF;
}

.page-size-selector {
  display: flex;
  align-items: center;
}
</style>